<script setup>
import {ref} from 'vue'
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const tagList= ref([{
    name:'都市',
    value: 1,
    flag: false
},{
    name:'历史',
    value: 2,
    flag: false
},{
    name:'玄幻',
    value: 3,
    flag: false
},{
    name:'武侠',
    value: 4,
    flag: false
},
]);
const selectedTag = (v) => {
    v.flag = !v.flag;
};
const num = () => {
    // tagList 被ref包裹。即为ref对象，调取数据用.vaule
   return tagList.value.filter(v => v.flag === true).length;
}
</script>
<template>
    <div class="like">
        <van-cell title="设置喜好" is-link @click="showPopup"/>
        <van-popup v-model:show="show" round position="bottom" :style="{ height: '60%' }"
        closeable close-icon-position="top-left" close-icon="arrow-down">
            <div class="like-list">
                <h4>请选择你的喜好</h4>
                <p>请选择喜欢的分类:(已选择 {{num()}} 个)</p>
                <ul>
                    <li v-for="(v,i) in tagList" :key="i" :class="v.flag ? 'addclass': ''" @click="selectedTag(v)">
                        {{v.name}}
                    </li>
                </ul>
            </div>
        </van-popup>
    </div>
</template>
<style scoped>

</style>